<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./tianqi.css">
    <style>

        .tupian{

            background-image: url('./图层\ 2.png');
            background-size: cover;
            background-repeat: no-repeat;
            
        }

    </style>
</head>
<body>
    <div class="head">

        <input type="text" class="shurukuang" placeholder="输入城市名字后点击回车">

    </div>
    <div class="zhuti">
        <div class="tupian"></div>
        <div class="wenzi">
            <span class="sheng"></span><span>省</span>
            <span class="city"></span><br>
            <span>温度：</span> <span class="wendu"></span><span></span><br>
            <span>湿度：</span> <span class="shidu"></span> <span></span><br>
            <span>天气情况：</span> <span class="tianqi"></span>
        </div>
        <div class="shijian">

            <span>风向：</span> <span class="fengxiang"></span> &nbsp;  &nbsp; &nbsp; &nbsp; &nbsp;
            <span>风力等级：</span>  <span class="fengli"></span> <span></span><br>
            <span class="time"></span>

        </div>
    </div>
    <script>
        let p = document.querySelector('.wendu')
        let city = document.querySelector('.city')
        let province = document.querySelector('.sheng')
        let weather = document.querySelector('.tianqi')
        let winddirection = document.querySelector('.fengxiang')
        let windpower = document.querySelector('.fengli')
        let reporttime = document.querySelector('.time')
        let humidity = document.querySelector('.shidu')
        let shuru = document.querySelector('.shurukuang')
        let zhuti = document.querySelector('.zhuti')

            shuru.addEventListener('keyup',function(e){
                if(e.key === 'Enter'){
                    if(shuru.value.trim() ===''){
                        alert('你必须输入内容')
                        shuru.value = ''
                        zhuti.style.opacity = 0
                    }else if(shuru.value.trim() !==''){
                        let te = shuru.value
                        let i = encodeURIComponent(te);
                        console.log(i);
                        fetch(`https://restapi.amap.com/v3/weather/weatherInfo?city=${i}&key=f54c649a6cb074722625cce13ab6d262`)
                            .then( response => response.json())
                            .then( data => {p.innerHTML =  data.lives[0].temperature;
                                            city.innerHTML = data.lives[0].city;
                                            province.innerHTML = data.lives[0].province;
                                            humidity.innerHTML = data.lives[0].humidity;
                                            weather.innerHTML = data.lives[0].weather;
                                            winddirection.innerHTML = data.lives[0].winddirection;
                                            windpower.innerHTML = data.lives[0].windpower;
                                            reporttime.innerHTML = data.lives[0].reporttime;
                            })
                            
                            
                        .catch(error => {
                        alert('无效的城市名字！');
                        zhuti.style.opacity = 0
                        shuru.value=''
                            })
                        zhuti.style.opacity = 1
                        shuru.value=''
                    }
                    
                    
                }
                
            })
    </script>

</body>
</html>